<template>
  <div v-loading="loading" element-loading-text="加载中..." class="sention_item">
    <div style="display: flex; justify-content: space-between">
      <AssociateSettlementTemplate :order-module-id="route.params.id as string" @updated="getList">
        <HPlainButton> 关联结单模版 </HPlainButton>
      </AssociateSettlementTemplate>
      <div style="display: flex; justify-content: flex-end; gap: 5px">
        <el-input v-model="name" placeholder="名称搜索" class="input-with" clearable @keyup.enter="getList" @clear="getList"
          style="width: 120px" />
        <HButton type="primary" @click="getList">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </HButton>
      </div>
    </div>
    <div class="table-list">
      <el-table border stripe resizable :data="tableData" style="position: absolute" height="100%">
        <el-table-column show-overflow-tooltip type="index" :index="indexMethod" label="序号" width="50" />
        <el-table-column show-overflow-tooltip prop="name" label="字段名称" width="150" />
        <el-table-column show-overflow-tooltip label="字段类型" width="75">
          <template #default="scope">
            <span v-for="item in field_type" :key="item.val" v-show="scope.row.type == item.val">{{
    item.name
  }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="content" label="字段内容" min-width="150" />
        <el-table-column show-overflow-tooltip prop="template" label="所属模版" width="150" />
        <el-table-column show-overflow-tooltip prop="required" label="是否必填" width="80">
          <template #default="scope">
            <span v-if="scope.row.required">必填</span>
            <span v-if="!scope.row.required">选填</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="150" />
      </el-table>
    </div>
    <div class="footer flex-justify-end">
      <Pagination ref="pagination" :list_total="total" @size-change="getList" @current-change="getList" />
    </div>
  </div>
</template>

<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { getModuleField } from '@/api/basic'
import AssociateSettlementTemplate from '@/components/pages/ParamSet/OrderSet/ModuleDetail/AssociateSettlementTemplate/AssociateSettlementTemplate.vue'
import HPlainButton from '@/components/common/button/HPlainButton.vue'
import HButton from '@/components/common/button/HButton.vue'

const route = useRoute()
const loading = ref(false)
const name = ref('') // 名称
const tableData = ref([]) // 列表数据
const pagination = ref() // 分页dom
const total = ref(0) // 总数目
const field_type = ref([
  { name: '文本', val: 1 },
  { name: '多行文本', val: 2 },
  { name: '单选', val: 3 },
  { name: '多选', val: 4 },
  { name: '多图', val: 5 },
  { name: '附件', val: 6 },
  { name: '视频', val: 7 },
  { name: '评分', val: 8 },
])

// 列表序号
const indexMethod = (index: number) => {
  return index + 1
}

// 获取列表数据
const getList = async () => {
  const data = {
    limit: pagination.value.size,
    name: name.value,
    page: pagination.value.current,
  }
  loading.value = true
  await getModuleField(data, route.params.id).then((res) => {
    tableData.value = res.data.data.rows
    total.value = parseInt(res.data.data.total)
  })
  loading.value = false
}

defineExpose({ getList })
</script>

<style scoped lang="scss">
@import '../../index.scss';
</style>
